<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            font-family: '微软雅黑';
        }
        body {
            margin: 0;
            padding: 0;
             background-color: deepskyblue;
            /*background: url('/img/loginBroung.jpg') no-repeat center /100% 100%;*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul {
            margin: 0;
            padding: 50px;
            padding-top: 0px;
            list-style: none;
        }

        .register {
            width: 800px;
            background-color: #F9F9F9;
            border: 1px solid #CCC;
            border-radius: 5px;
        }

        li {
            display: flex;
            margin: 20px 0;
        }

        label,
        input {
            display: block;
            float: left;
            height: 46px;
            font-size: 20px;
            box-sizing: border-box;
            color: #333;
        }

        label {
            width: 200px;
            line-height: 46px;
            margin-right: 30px;
            text-align: right;
        }

        input {
            width: 320px;
            padding: 8px;
            line-height: 1;
            outline: none;
            position: relative;
        }

        input.code {
            width: 120px;
        }

        input.verify {
            width: 190px;
            margin-left: 10px;
        }

        input.disabled {
            background-color: #CCC !important;
            cursor: not-allowed !important;
        }

        input[type=button] {
            border: none;
            color: #FFF;
            background-color: deepskyblue;
            border-radius: 4px;
            cursor: pointer;
        }

        .tips {
            width: 100%;
            height: 40px;
            text-align: center;
        }

        .tips p {
            min-width: 300px;
            max-width: 400px;
            line-height: 40px;
            margin: 0 auto;
            color: #FFF;
            display: none;
            background-color: #C91623;
        }

        .submit:disabled {
            background-color: gray;
            cursor: not-allowed;
        }

        span {
            line-height: 46px;
            padding-left: 20px;
            font-size: 20px;
            color: yellowgreen;
            text-shadow: 0 0 20px yellowgreen;
        }
        #ab{
            float: right;
            margin-right: 60px;
            margin-bottom: 100px;
        }
        #h{
            margin-top: 5px;
        }
    </style>

</head>
<body>
<div class="register">
    <form  action="/forgetPwd" method="post">
        <center>
            <h1 id="h">全国手球运动员注册系统——找回密码</h1>
        </center>
        <ul>
            <li>
                <label for="">手机号:</label>
                <input type="text" name="userphone"  placeholder="请输入手机号" id="userphone">
            </li>
            <li>
                <label for="">短信验证码</label>
                <input type="text" name="code" class="code" id="code" onblur="yzm()">
                <input type="button" value="获取验证码" class="verify" onclick="getCode()">
            </li>
            <li>
                <label for="">请输入密码:</label>
                <input type="password" name="userpwd"  placeholder="请输入密码" id="pwd1" class="password-field">
            </li>
            <li>
                <label for="">请确认密码:</label>
                <input type="password"    placeholder="请确认密码" id="pwd2" onblur="qr()">
            </li>
            <li>
                <label for=""></label>
                <input type="submit" value="找回密码">
            </li>
        </ul>
    </form>
</div>

</body>
<script>
    function qr() {
        var pwd1=$("#pwd1").val();
        var  pwd2=$("#pwd2").val();
        if(pwd1!=pwd2){
            alert("两次密码不一致，请重新输入");
        }
    }
    function yzm() {
        var code2=$("#code").val();
        if(code!=code2){
             alert("验证码不一致，请重新发送短信")
        }
    }

    var  code ="";
    function getCode(res) {
        // var phone=$("#phone").val();
        $.ajax({
            url: "getYzm",
            data: {},
            async:false,
            success:function (res) {
                if(res){
                    console.log(res);
                    code=res;
                    alert("您的验证码为:"+res);
                }
            }
        })
    }
</script>

</body>
</html>